/**
 * @name Avatar
 * @author darcrand
 * @desc
 */

import React, { Component } from 'react'
import styles from './styles.module.less'

const defaultAvatar = require('@/assets/images/default-avatar.png')

/**
 * @property {String} src
 * @property {String|Number} size
 * @property {Object} [style]
 * @property {Function|null} [onClick]
 * @property {Boolean|String} border
 */
class Avatar extends Component {
  static defaultProps = {
    src: '',
    onClick: null,
    size: '50px',
    type: 'circular',
    style: {}
  }

  render() {
    const { src, size, onClick, type, style, ...rest } = this.props
    const styleNames = [styles.img]
    type && styleNames.push(styles[type])
    !!onClick && styleNames.push(styles.clickable)

    const computedStyleName = styleNames.join(' ')

    return (
      <div
        {...rest}
        className={computedStyleName}
        style={{
          width: size,
          height: size,
          backgroundImage: `url("${src || defaultAvatar}")`,
          ...style
        }}
        onClick={onClick}
      ></div>
    )
  }
}

export default Avatar
